<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<style>
    .model{
        width:500px;
        border: 1px solid white;
        border-radius: 6px;
        box-shadow: 5px 5px 5px white;
    }
    .model-header{
        height: 50px;
        line-height: 50px;
        padding: 0,15px;
        color: white;
        background-color: teal;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }
    .mode-content{
        height: 50px;
        padding: 25px 15px;
    }
    .model-footer{
        
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        border-top: 1px solid teal;
        line-height: 50px;
        text-align: right;
        padding: 0 25px;
    }
    .botton{
        width:100px;
        height:30px;
        border:1px solid whitesmoke;
        border-radius: 3px;
        background-color: white;
    }
    .green{
        background-color: teal;
        color:white;
        border: 1px solid teal;
    }
</style>
<body>
    <div id="app">
        <button @click="isShow=ture">点击</button>
        <button @click="isShow1=ture ">删除</button>
        <my-cpn @ok='proopClick' @cancel="isShow=false" :is-show="isShow" v-show="isShow" title="温馨提示" content="内容" cancel-button="关闭"></my-cpn>
        <my-cpn @ok='proopClick1' @cancel="isShow1=false" :is-show="isShow1" v-show="isShow1" title="警告" content="删除后不能恢复" ok-button="删除"></my-cpn>
    </div>
    <template id='cpn'>
        <div class='model'>
            <div class="model-header" v-show="isShow">{{title}}</div>
            <div class="model-content">{{content}}</div>
            <div class="model-footer">
                <button @click="okBtn" class="botton green">{{okButton}}</button>
                <button @click="canBtn">{{cancelButton}}</button>
            </div>
        </div>
    </template>
    <script>
        Vue.component('my-cpn',{
            template:'#cpn',
            props:{
                isShow:{
                    type:Boolean,
                    default:false
                },
                title:{
                    type:String,
                    default:'提示'
                },
                content:{
                    type:String,
                    default:''
                },
                okButton:{
                    type:String,
                    default:'确定'
                },
                cancelButton:{
                    type:String,
                    default:'取消'
                }
            },
            methods:{
                okBtn(){
                    this.$emit('ok')
                }, 
                canBtn(){
                    this.$emit('cancel')
                }
            }
        })
        new Vue({
            el:'#app',
            data:{
                isShow:false,
                isShow1:false
            },
            methods:{
                proopClick(){
                    alert('确定')
                },
                proopClick1(){
                    alert('删除')
                }
            }
        })
    </script>
</body>
</html>